.other {
  position: relative;
  overflow: hidden;

  .phone-login {
    display: inline-block;
    width: 224px;
    padding: 0 35px 3px 40px;
    border-right: 1px dotted #ccc;
    vertical-align: top;

    .icon-phone {
      display: inline-block;
      width: 100%;
      height: 120px;
      background: url('@/assets/image/login/other-phone.png') no-repeat;
      background-size: contain;
    }

    .phone-login-btn,
    .phone-register-btn {
      display: block;
      width: 233px;
      height: 32px;
      margin-top: 10px;
      margin-left: -6px;
      line-height: 31px;
      color: #fff;
      text-align: center;
      cursor: pointer;
      background: url('@/assets/image/icon-button.png') no-repeat;
      background-position: right -428px;
      border: none;
      outline: none;

      .icon-phone-login,
      .icon-register-login {
        display: inline-block;
        width: 229px;
        height: 100%;
        font-style: normal;
        color: #fff;
        text-align: center;
        background: url('@/assets/image/icon-button.png') no-repeat;
        background-position: 0 -387px;
      }
    }

    .phone-register-btn {
      text-align: center;
      background-position: right -100px;

      .icon-register-login {
        background-position: 0 -59px;
        color: #333;
      }
    }
  }

  .other-login {
    display: inline-block;
    vertical-align: top;
    padding: 3px 0 3px 39px;

    .item {
      margin-top: 15px;
      cursor: pointer;

      .icon {
        display: inline-block;
        width: 38px;
        height: 38px;
        margin-right: 14px;
        vertical-align: middle;
        background: url('@/assets/image/icon-logo.png') no-repeat;
      }

      .wechat {
        background-position: -150px -670px;
      }

      .qq {
        background-position: -190px -670px;
      }

      .micro-blog {
        background-position: -231px -670px;
      }

      .mailbox {
        background-position: -271px -670px;
      }

      .text {
        display: inline-block;
        font-style: normal;
        vertical-align: middle;
      }

      .text:hover {
        text-decoration: underline;
      }
    }

    .first-item {
      margin-top: 2px;
    }
  }
}

.icon-qrcode-login {
  position: absolute;
  right: 0;
  bottom: 0;
}

.icon-qrcode-login::before {
  position: absolute;
  right: -1px;
  bottom: 0;
  z-index: 100000;
  width: 52px;
  height: 52px;
  cursor: pointer;
  background: url('@/assets/image/login/qrcode-login.png') no-repeat;
  content: '';
  background-size: contain;
}

.official {
  padding-bottom: 32px;
  margin: 30px 0 0 40px;

  .official-checkbox {
    display: inline-block;
    vertical-align: middle;

    .checkbox {
      display: inline-block;
      vertical-align: middle;
    }

    .text {
      display: inline-block;
      margin-left: 2px;
      font-family: NotoSansHans-Regular, sans-serif;
      font-size: 10px;
      line-height: 15px;
      color: rgb(0 0 0 / 40%);
      white-space: nowrap;
      vertical-align: middle;
    }
  }

  .left-nav {
    display: inline-block;
    vertical-align: middle;

    .item {
      display: inline-block;

      .link {
        color: #507daf;
      }
    }
  }
}

.mobile-phone-form {
  width: 220px;
  padding: 0 0 43px;
  margin: 0 auto;
}

.mailbox-form {
  width: 220px;
  padding: 0 0 43px;
  margin: 0 auto;
}

.return-other-login {
  width: 100%;
  height: 48px;
  line-height: 48px;
  background-color: #f7f7f7;
  border-radius: 0 0 4px 4px;
  border-top: 1px solid #c6c6c6;

  .text {
    padding: 0 19px;
    color: #0c72c3;
    cursor: pointer;
  }

  .register {
    position: absolute;
    right: 15px;
    color: #999;
    cursor: pointer;
  }
}
